<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>密码强度检查工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 50px auto;
            padding: 20px;
        }

        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .password-container {
            position: relative;
            margin-bottom: 20px;
        }

        #password {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #toggleVisibility {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: #666;
        }

        .requirement-list {
            list-style: none;
            padding: 0;
        }

        .requirement-item {
            display: flex;
            align-items: center;
            margin: 8px 0;
            color: #666;
        }

        .icon {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }

        .valid {
            color: #4CAF50;
        }

        .invalid {
            color: #f44336;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>密码强度检查</h2>
        <div class="password-container">
            <input type="password" id="password" placeholder="输入密码..." autocomplete="off">
            <button id="toggleVisibility" onclick="togglePasswordVisibility()">👁️</button>
        </div>
        <ul class="requirement-list">
            <li class="requirement-item">
                <span class="icon">🔒</span>
                <span id="length">至少8个字符</span>
            </li>
            <li class="requirement-item">
                <span class="icon">⬆</span>
                <span id="uppercase">包含大写字母</span>
            </li>
            <li class="requirement-item">
                <span class="icon">⬇</span>
                <span id="lowercase">包含小写字母</span>
            </li>
            <li class="requirement-item">
                <span class="icon">🔢</span>
                <span id="number">包含数字</span>
            </li>
            <li class="requirement-item">
                <span class="icon">⚡</span>
                <span id="special">包含特殊符号 (!@#$%^&*)</span>
            </li>
        </ul>
    </div>

    <script>
        const passwordInput = document.getElementById('password');
        const requirements = {
            length: document.getElementById('length'),
            uppercase: document.getElementById('uppercase'),
            lowercase: document.getElementById('lowercase'),
            number: document.getElementById('number'),
            special: document.getElementById('special')
        };

        // 密码输入事件监听
        passwordInput.addEventListener('input', checkPasswordStrength);

        function checkPasswordStrength() {
            const password = passwordInput.value;
            
            // 检查各个条件
            const hasMinLength = password.length >= 8;
            const hasUpperCase = /[A-Z]/.test(password);
            const hasLowerCase = /[a-z]/.test(password);
            const hasNumber = /[0-9]/.test(password);
            const hasSpecialChar = /[!@#$%^&*]/.test(password);

            // 更新界面状态
            updateRequirement(requirements.length, hasMinLength);
            updateRequirement(requirements.uppercase, hasUpperCase);
            updateRequirement(requirements.lowercase, hasLowerCase);
            updateRequirement(requirements.number, hasNumber);
            updateRequirement(requirements.special, hasSpecialChar);
        }

        function updateRequirement(element, isValid) {
            element.classList.toggle('valid', isValid);
            element.classList.toggle('invalid', !isValid);
            element.previousElementSibling.textContent = isValid ? '✅' : '❌';
        }

        function togglePasswordVisibility() {
            const passwordField = passwordInput;
            const toggleButton = document.getElementById('toggleVisibility');
            
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                toggleButton.textContent = '👁️🗨️';
            } else {
                passwordField.type = 'password';
                toggleButton.textContent = '👁️';
            }
        }
    </script>
</body>
</html>